import 'package:flutter/material.dart';
import 'package:get/get.dart' hide WidgetPaddingX;
import 'package:hotpot/basic/app_colors.dart';
import 'package:hotpot/http/http_api.dart';
import 'package:hotpot/models/shop_detail.dart';
import 'package:hotpot/models/table_count.dart';
import 'package:hotpot/pages/order/widgets/confirma_pin_widget.dart';
import 'package:hotpot/route/route_ext.dart';
import 'package:hotpot/route/route_mixin.dart';
import 'package:hotpot/route/routes.dart';
import 'package:hotpot/utils/user_utils.dart';
import 'package:hotpot/widgets/widget_ext.dart';
import 'package:hotpot/widgets/z_container.dart';
import 'package:hotpot/widgets/z_image.dart';

List storeList = [];

List<String> homeImage = [];

class StorePage extends StatefulWidget {
  const StorePage({super.key});

  @override
  State<StorePage> createState() => _StorePageState();
}

class _StorePageState extends State<StorePage> with ArgMixin {
  var showPin = false.obs;

  ShopDetail? detail;

  dynamic selectStore;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.baColor,
      body: Stack(
        children: [
          Column(
            children: [
              50.hSizedBox,
              ZImage.memory(bytes: UserUtils.companyImg, width: 95, height: 95, radius: 100),
              31.hSizedBox,
              UserUtils.companyName.text(color: Colors.black, size: 16, bold: true),
              100.hSizedBox,
              SingleChildScrollView(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ...storeList.map(item),
                  ],
                ),
              ),
            ],
          ).alignCenter(),
          Obx(
            () => ConfirmaPinWidget(
              () => showPin.value = false,
              (id) async {
                var data = await HttpApi.getTablesOrderCountChanges(int.parse(detail!.posSession!.configId!.first));
                var list = (data.result as List).map((e) => TableCount.fromJson(e)).toList();
                Map<int, TableCount> tableMap = {};
                for (var item in list) {
                  tableMap[item.id!] = item;
                }
                Routes.table.popAndPushNamed(arg: {
                  'shop': detail,
                  'table': tableMap,
                  'staffId': id,
                  'accessToken': selectStore['access_token'],
                });
              },
              shop: detail,
            ).visibility(showPin.value),
          ),
          // const TimeBox().positioned(left: 20, top: 9),
          'images/img_back.png'
              .assetImage(width: 10, height: 15)
              .paddingOnly(left: 15, top: 16)
              .gestureDetector(onTap: () => Routes.loginService.popAndPushNamed()),
        ],
      ),
    );
  }

  @override
  void loadArg(Map<String, dynamic> arg) {
    // TODO: implement loadArg
    if (arg.isNotEmpty) {
      storeList = arg['data'];
    }
  }

  Widget item(store) {
    return ZContainer(
      width: 118,
      height: 35,
      radius: 18,
      margin: const EdgeInsets.only(bottom: 11),
      color: selectStore == store ? const Color(0xFFF0F5FA) : const Color(0xFFFFFFFF),
      alignment: Alignment.center,
      // showShadows: true,
      // shadowColor: Colors.black.withOpacity(0.25),
      child: store['name']
          .toString()
          .text(size: 10, bold: true, color: selectStore == store ? const Color(0xFF22CE67) : Colors.black),
    ).gestureDetector(onTap: () {
      homeImage = (store['home_images'] as List?)?.map((e) => e.toString()).toList() ?? [];
      selectStore = store;
      setState(() {});
      loadShop(store['id'] as int);
    });
  }

  void loadShop(int storeId) async {
    var value = await HttpApi.loadPosConfigData(storeId);
    detail = ShopDetail.fromJson(value.result);
    // showPin.value = true;
    var data = await HttpApi.getTablesOrderCountChanges(int.parse(detail!.posSession!.configId!.first));
    var list = (data.result as List).map((e) => TableCount.fromJson(e)).toList();
    Map<int, TableCount> tableMap = {};
    for (var item in list) {
      tableMap[item.id!] = item;
    }
    Routes.table.popAndPushNamed(arg: {
      'shop': detail,
      'table': tableMap,
      // 'staffId': id,
      'accessToken': selectStore['access_token'],
    });
  }
}
